<template>
  <div>
    <el-dialog
      :title="dialogTitle"
      :visible.sync="menuVisible"
      width="574px"
      :modal-append-to-body="false"
      :show-close="false"
      :before-close="_handleCancelClick"
    >
      <p class="menu-title">{{ subTitle }}</p>

      <SelectMenu
        ref="selectMenu"
        :selected-menu-list="defaultMenuList"
        :is-multi-select="isMultiSelect"
      />
      <span slot="footer" class="dialog-footer">
        <SubButton title="确定" @subClick="_handleSubClick" />
        <CancelButton @cancelClick="_handleCancelClick" />
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import SubButton from '../sub-button/index.vue'
  import CancelButton from '../cancel-button/index.vue'
  import SelectMenu from '../select-menu/index.vue'
  export default {
    name: 'MenuSelector',
    components: { SubButton, CancelButton, SelectMenu },
    props: {
      isMultiSelect: { type: Boolean, default: true },
      menuVisible: { type: Boolean, default: false },
      dialogTitle: { type: String, default: '选择菜单' },
      subTitle: { type: String, default: '产品应用：无' },
      defaultMenuList: {
        type: Array,
        default() {
          return []
        }
      }
    },
    data() {
      return {}
    },
    methods: {
      getMenuList() {
        return this.$refs.selectMenu.getMenuList()
      },
      _handleOpenClick() {
        this.$emit('showClick')
      },
      _handleSubClick() {
        this.$emit('confirmClick', this.getMenuList())
      },
      _handleCancelClick() {
        this.$emit('cancelClick')
      }
    }
  }
</script>

<style lang="scss" scoped>
  .menu-title {
    padding-bottom: 14px;
    padding-left: 10%;
    font-size: 16px;
    border-bottom: 1px solid #ccc;
  }

  ::v-deep {
    .el-dialog__body {
      padding: 0;
    }

    .el-dialog__footer {
      text-align: center;
    }
  }
</style>
